<template>
    <div class="container long-container wow animate__animated animate__fadeInUp" data-wow-duration="2s"
        data-wow-delay="0.1s">
        <h3 class="title">新闻中心</h3>
        <!-- 新闻列表区域  START -->
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 " v-for="item in homeNewsList" :key="item.id">
                <div class="thumbnail long-thumbnail" @click="goNewsDetail(item)">
                    <div class="img-container">
                        <img :src="item.imgUrl" :alt="item.title">
                    </div>
                    <div class="textArea">
                        <h3>{{item.title}}</h3>
                        <p>{{item.releaseDate}}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新闻列表区域  END -->
        <router-link class="more" to="/news">了解更多</router-link>
    </div>
</template>
<script>
    import { useRouter } from 'vue-router'
    import { onMounted, nextTick, computed } from "vue";
    import { useNewsStore } from "../../../store/news"  //引入news仓库
    import { storeToRefs, mapS } from 'pinia'  //引入方法让仓库里的值可以解构赋值并且具有响应式
    import { WOW } from 'wowjs'
    import "animate.css";
    export default {
        name: "NewsTrands",
        setup() {
            const router = useRouter()
            const store = useNewsStore()
            onMounted(() => {
                //初始化wow.js(页面滚动加载动画)
                nextTick(() => {   //页面渲染完，再执行
                    let wow = new WOW({
                        live: false
                    })
                    wow.init()
                })
                store.getNewsList()  //通知vuex发送请求获取新闻列表的数据
            });
            let homeNewsList = computed(() => store.homeNewsList)  //获取仓库里getters计算后的 截取新闻列表前三条数据的列表
            //跳转到新闻动态
            function goNewsDetail(item) {
                router.push({
                    path: "/news/newsdetails",
                    query: {
                        imgUrl: item.imgUrl,
                        title: item.title,
                        content: JSON.stringify(item.content),
                        releaseDate: item.releaseDate,
                    }
                })

                //将该函数包裹一个定时器确保可以获取跳转页面后的指定位置的id
                setTimeout(() => {
                    var goDetailTop = document.getElementById('long-left')
                    goDetailTop.scrollIntoView({
                        behavior: 'smooth',//平滑滚动
                        block: "center"//将指定位置滚动到页面中间
                    })
                }, 100)
            }
            return {
                homeNewsList,
                goNewsDetail
            }
        }
    }
</script>
<style scoped>
    .long-container {
        margin-top: 80px;
        font-family: "Source Han Sans CN";
        margin-bottom: 120px;
    }

    .long-container .title {
        font-size: 30px;
        font-weight: 500;
        text-align: center;
        color: #4F68AC;
    }

    .long-thumbnail {
        position: relative;
        border: 1px solid #fff;
        cursor: pointer;
        margin-top: 60px;
    }

    .long-container .long-thumbnail .img-container {
        height: 198px;
        width: 100%;
        overflow: hidden;
    }

    .long-container .long-thumbnail .img-container img {
        width: 100%;
        background-color: #f1f1f1;
    }

    .long-thumbnail:hover .textArea {
        transform: translateY(-50px);
        box-shadow:
            0px 0px 1.8px -8px rgba(0, 0, 0, 0.014),
            0px 0px 4px -8px rgba(0, 0, 0, 0.021),
            0px 0px 6.9px -8px rgba(0, 0, 0, 0.026),
            0px 0px 11px -8px rgba(0, 0, 0, 0.03),
            0px 0px 17px -8px rgba(0, 0, 0, 0.034),
            0px 0px 26.5px -8px rgba(0, 0, 0, 0.039),
            0px 0px 44px -8px rgba(0, 0, 0, 0.046),
            0px 0px 88px -8px rgba(0, 0, 0, 0.08);
    }

    .long-thumbnail .textArea {
        position: absolute;
        top: 50%;
        margin-top: 40px;
        left: 50%;
        margin-left: -140px;
        background-color: #fff;
        width: 280px;
        height: 140px;
        text-align: center;
        padding: 35px 30px;
        transition: all 0.6s ease;
    }

    .long-thumbnail .textArea h3 {
        font-size: 16px;
        color: #666;
        /* 显示两行文本，溢出显示省略号 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .long-thumbnail .textArea p {
        font-size: 14px;
        color: #999;
        margin-top: 15px;
    }

    .more {
        height: 40px;
        line-height: 40px;
        text-align: center;
        width: 140px;
        display: block;
        margin: 100px auto 0px;
        border: 1px solid #999;
        background-color: #fff;
        font-size: 14px;
        color: #999;
        transition: background-color 0.5s ease;
    }

    .more:hover {
        text-decoration: none;
        background-color: #4F68AC;
        color: #fff;
    }
</style>